@import "./variable";

.tabs-layout{
  border-radius: 8px !important;
  .ivu-tabs-nav-wrap{
    background: #FFFFFF;
    box-shadow: 0px 4px 8px 0px rgba(0,20,45,0.04);
    border-radius: 8px;
  }
  .ivu-tabs-nav-prev,.ivu-tabs-nav-next{
    line-height: 48px;
    &:hover{
      color: $font-black-hover-color;
    }
  }
  .ivu-tabs-nav {
    .ivu-tabs-tab{
      padding: 0 42px;
      font-size: 16px !important;
      font-weight: bold;
      color: rgba(0,20,45,0.5);
      line-height: 48px;
      height: 48px;
      margin-right: 0;

      div{
        vertical-align: top;
        span{
          font-size: 16px !important;
          font-weight: bold;
        }
      }
      &:nth-child(2){
        &.ivu-tabs-tab-active{
          background: url("~@/assets/images/theme/tab1.png") center center no-repeat;
          background-size: 100% 100%;
        }
      }
      &:last-child{
        &.ivu-tabs-tab-active{
          background: url("~@/assets/images/theme/tab3.png") center center no-repeat;
          background-size: 100% 100%;
        }
      }
      .ivu-badge{
        width: 19px;
        height: 19px;
        .ivu-badge-count{
          padding: 0;
        }
      }
    }

    .ivu-tabs-tab-active{
      font-weight: bold;
      color: #035BEB;
      position: relative;
      background: url("~@/assets/images/theme/tab2.png") center center no-repeat;
      background-size: 100% 100%;

      &:before{
        content: "";
        display: inline-block;
        width: 76px;
        height: 4px;
        background: #035BEB;
        position: absolute;
        left: 50%;
        bottom: 0px;
        width: 76px;
        transform: translateX(-50%);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        transition: all .3s linear;
      }
      &:after{
        content: "";
        width: 0px;
        height: 0px;
        position: absolute;
        left: 50%;
        bottom: 1px;
        transform: translateX(-50%) rotate(-90deg);
        //background: #035BEB;
        border-left: 4px solid #035BEB;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        transition: all .3s linear;
      }
    }
    .ivu-tabs-ink-bar{
      display: none;
    }
  }
  //.right-content{
  //  position: absolute;
  //  right: 0;
  //  top: 0;
  //}
}
